<script>
import requestUtil from "@/utils/RequestUtil";
import Vue from "vue";
import { Toast } from "vant";

export default {
  name: "productDetail",
  data() {
    return {
      product_data: {
        productCarousel: "",
        productDetail: [],
        productId: null,
        productIntroduce: "",
        productName: "",
        productNum: null,
        productParam: {},
        productPrice: null,
        storeId: null,
        normalType: "",
      },
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      showHeader: false,
      showAddCart: false,
      activeType: {},
      buyNum: 1,
    };
  },
  methods: {
    init() {
      window.addEventListener("scroll", this.handleScroll);
      this.productId = this.$route.query.product_id;
      requestUtil({
        url: "/getProductById",
        method: "get",
        params: {
          id: this.productId,
        },
      }).then((res) => {
        this.product_data = { ...this.product_data, ...res.data.data };
        // this.product_data.productParam = JSON.parse(this.product_data.productParam)
        // this.product_data.productDetail = JSON.parse(this.product_data.productDetail)
        for (let k in this.product_data.productParam) {
          if (this.product_data.normalType !== "") {
            this.product_data.normalType += " ";
          }
          Vue.set(this.activeType, k, 0);
          this.product_data.normalType += this.product_data.productParam[k][0];
        }
        console.log(this.activeType);
      });
    },
    handleScroll() {
      if (this.showHeader && document.documentElement.scrollTop === 0) {
        this.showHeader = false;
      }
      if (
        this.showHeader === false &&
        document.documentElement.scrollTop !== 0
      ) {
        this.showHeader = true;
      }
    },
    changeActiveType(k, index) {
      Vue.set(this.activeType, k, index);
    },
    addShopCart() {
      let toast = Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      requestUtil({
        url: "/user/shopCartAdd",
        method: "post",
        headers: {
          token: this.$store.getters.getUserInfo.token,
        },
        data: {
          productId: this.product_data.productId,
          productNum: this.buyNum,
        },
      })
        .then((res) => {
          this.showAddCart = false;
          if (res.data.code === 1) {
            toast.type = "success";
            toast.message = "添加成功！";
          } else {
            toast.type = "fail";
            toast.message = "添加失败";
          }
        })
        .finally(() => {
          setTimeout(() => {
            toast.clear();
          }, 500);
        });
    },
    onCare() {
      requestUtil({
        url: "/user/collection/save?productId=" + this.productId,
        method: "post",
        headers: {
          token: this.$store.getters.getUserInfo.token,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          Toast({
            message: res.data.msg,
            type: "success",
          });
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<template>
  <div style="padding-bottom: 50px">
    <van-nav-bar
      :class="[showHeader ? 'black-header' : 'transparent-header']"
      fixed
      style="transition-duration: 0.5s"
    >
      <template #left>
        <van-icon
          class="icon"
          name="arrow-left"
          size="20"
          style="transition-duration: 0.3s"
          @click="$router.back()"
        />
      </template>
    </van-nav-bar>
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      style="width: 100%; height: 400px"
    >
      <van-swipe-item>
        <van-image
          :src="product_data.productCarousel"
          fit="contain"
          lazy-load
          style="height: 100%; width: 100%"
        />
      </van-swipe-item>
    </van-swipe>
    <div style="padding: 11px 16px; background-color: white">
      <span
        style="
          font-size: 17px;
          line-height: 27px;
          color: #303133;
          display: block;
        "
        >{{ product_data.productName }}</span
      >
      <span
        style="
          display: block;
          font-size: 15px;
          color: #909399;
          line-height: 25px;
        "
        >{{ product_data.productIntroduce }}</span
      >
    </div>
    <div style="padding: 0 16px; background-color: white">
      <span style="color: #fa436a; font-size: 18px"
        >￥{{ product_data.productPrice }}</span
      >
      <s style="padding: 0 5px; color: #909399"
        >￥{{ product_data.productPrice }}</s
      >
    </div>
    <div
      class="bot-row"
      style="
        padding: 0 16px;
        background-color: white;
        display: flex;
        justify-content: space-between;
      "
    >
      <span>销量：99</span>
      <span>库存：99</span>
      <span>浏览量：99</span>
    </div>
    <div
      style="
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 6px 15px;
        font-size: 15px;
      "
      @click="showShare = !showShare"
    >
      <span style="color: #606266">该商品分享可领49减10红包</span>
      <span style="color: #fa436a; font-size: 13px">立即分享 ></span>
    </div>
    <van-cell is-link>
      <template #title>
        <span style="display: inline-block; margin-right: 10px">购买类型</span>
        <span>{{ product_data.normalType }}</span>
      </template>
    </van-cell>
    <van-cell is-link>
      <template #title>
        <span style="display: inline-block; margin-right: 10px">商品参数</span>
        <span>查看</span>
      </template>
    </van-cell>
    <van-cell is-link>
      <template #title>
        <span style="display: inline-block; margin-right: 23px">优惠券</span>
        <span style="color: #fa436a">领取优惠券</span>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <div style="display: flex; align-items: center">
          <span style="display: inline-block; margin-right: 10px"
            >促销活动</span
          >
          <div>
            <p>满3件打7.5折</p>
            <p>多买优惠</p>
            <p>满2件打8折</p>
          </div>
        </div>
      </template>
    </van-cell>
    <van-cell>
      <template #title>
        <span style="display: inline-block; margin-right: 36px">服务</span>
        <span>无忧退货</span>
      </template>
    </van-cell>
    <div style="padding: 20px 15px; margin-top: 10px; background-color: white">
      <div style="display: flex; justify-content: space-between">
        <div>
          <span style="font-size: 16px">评价</span>
          <span style="font-size: 13px; color: #909399">(86)</span>
        </div>
        <div>
          <span style="font-size: 14px; color: #909399">好评率 100%</span>
          <van-icon color="#909399" name="arrow" size="13" />
        </div>
      </div>
      <div style="padding: 10px 0; display: flex">
        <img
          alt="face"
          src="https://sns-webpic-qc.xhscdn.com/202312240056/9396a7b7879cc6084ce549fbf3ac3c21/01024501kmc96whl4ev0112wepi4lsls8w!nd_dft_wgth_webp_3"
          style="
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin-right: 20px;
          "
        />
        <div style="display: flex; flex-direction: column">
          <span style="font-size: 15px; color: #606266">Leo yo</span>
          <span style="font-size: 15px; color: #303133; margin-top: 10px"
            >商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</span
          >
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
            "
          >
            <span style="font-size: 13px; color: #909399"
              >购买类型：XL 红色</span
            >
            <span style="font-size: 13px; color: #909399"
              >2019-04-01 19:21</span
            >
          </div>
        </div>
      </div>
    </div>
    <div style="padding: 16px 27px; background-color: white; margin-top: 10px">
      <div style="display: flex; justify-content: center">
        <van-divider class="a" style="font-size: 16px">品牌信息</van-divider>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 10px;
        "
      >
        <img
          alt="logo"
          src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20200607/5565f5a2N0b8169ae.jpg"
          width="115px"
        />
        <div style="flex: 1; margin-left: 16px">
          <p style="font-size: 19px; color: #303133">小米</p>
          <p style="font-size: 13px; color: #909399; margin-top: 4px">
            品牌首字母：M
          </p>
        </div>
      </div>
    </div>
    <div style="padding: 16px 0 0; background-color: white; margin-top: 10px">
      <div style="display: flex; justify-content: center; margin-bottom: 10px">
        <van-divider style="font-size: 16px">图文详情</van-divider>
      </div>
      <!--      <img v-for="item in product_data.productDetail" :key="item" :src="item" alt="img" style="width: 100%"/>-->
    </div>
    <van-goods-action>
      <van-goods-action-icon color="#ee0a24" icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon @click="onCare" icon="star-o" text="已收藏" />
      <van-goods-action-button
        text="加入购物车"
        type="warning"
        @click="showAddCart = true"
      />
      <van-goods-action-button text="立即购买" type="danger" />
    </van-goods-action>
    <van-popup
      v-model="showAddCart"
      close-icon="close"
      closeable
      position="bottom"
      round
      style="max-height: 80%; padding: 10px"
    >
      <div style="display: flex; align-items: flex-end; margin-bottom: 10px">
        <img
          :src="product_data.productCarousel"
          alt="carousel"
          style="width: 100px; object-fit: contain"
        />
        <div
          style="
            font-weight: bold;
            color: #fa436a;
            font-size: 20px;
            padding-bottom: 5px;
          "
        >
          ￥{{ product_data.productPrice }}
        </div>
      </div>
      <div
        v-for="(v, k) in product_data.productParam"
        :key="k"
        style="margin-bottom: 10px"
      >
        <p style="font-size: 18px; font-weight: bold; margin-bottom: 5px">
          {{ k }}
        </p>
        <van-button
          v-for="(text, index) in v"
          :key="k + text"
          :color="index === activeType[k] ? 'rgb(249,81,107)' : ''"
          :style="{ marginRight: index !== v.length ? '10px' : '0' }"
          plain
          round
          @click="changeActiveType(k, index)"
          >{{ text }}
        </van-button>
      </div>
      <div
        style="display: flex; justify-content: space-between; margin-top: 10px"
      >
        <span>购买数量</span>
        <van-stepper v-model="buyNum" />
      </div>
      <van-button
        color="rgb(249,81,107)"
        round
        style="width: 100%; margin-top: 10px"
        @click="addShopCart"
        >加入购物车
      </van-button>
    </van-popup>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      title="立即分享给好友"
    />
  </div>
</template>

<style scoped>
.transparent-header {
  background-color: transparent;
}

.transparent-header .icon {
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.black-header {
  background-color: white;
}

.black-header .icon {
  color: black;
  background-color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.van-divider) {
  margin: 0;
  width: 50%;
}

.bot-row {
  align-items: center;
  height: 27px;
  font-size: 13px;
  color: #909399;
}

:deep([class*="van-hairline"]::after) {
  border: none;
}
</style>
